<template>
  <uni-popup ref="popup" type="dialog" :mask-click="false">
    <view class="dialog">
      <view class="title">{{ mode === 'exit' ? '退出考试' : '暂停考试' }}</view>
      <view class="body">
        <view class="row">
          <text>答题进度：{{ finishNum }}/{{ max }}</text>
        </view>
        <view class="row">
          <text>剩余时间：{{ timeFormat(timeLeft) }}</text>
        </view>
      </view>
      <view class="footer">
        <view class="btn" @click="onBack">放弃考试</view>
        <view class="btn primary" v-if="mode==='exit' && finishNum === max" @click="submitExam">现在交卷</view>
        <view class="btn primary" @click="resumeExam">继续答题</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import questionCache from "@/libs/questionCache";

export default {
  name: 'PauseExamDialog',
  props: ['storeId'],
  data() {
    return {
      max: 0,
      finishNum: 0,
      timeLeft: 0,
      mode: 0,
    }
  },
  methods: {
    onBack() {
      questionCache.getStore(this.storeId).publish('exitExam')
    },
    open(finishNum, max, timeLeft, mode) {
      this.max = max
      this.finishNum = finishNum
      this.timeLeft = timeLeft
      this.mode = mode
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    timeFormat(time) {
      let minutes = Math.floor((time) / 60) + ''
      if (minutes.length < 2) {
        minutes = '0' + minutes
      }
      let seconds = (time) % 60 + ''
      if (seconds.length < 2) {
        seconds = '0' + seconds
      }
      return minutes + ':' + seconds
    },
    resumeExam() {
      questionCache.getStore(this.storeId).publish('resumeExam')
    },
    submitExam() {
      questionCache.getStore(this.storeId).publish('submitExam')
    }
  }
}
</script>

<style lang='scss'>
.dialog {
  padding: 46upx 36upx;
  width: 500upx;

  .title {
    font-size: 18px;
    font-weight: bold;

    &.fail {
      color: #FB3C3D;
    }
  }

  .body {
    margin-top: 30upx;

    .count-row {
      height: 120upx;
      display: flex;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;

        .value {
          font-size: 22px;
          font-weight: 500;
        }

        .label {
          font-size: 13px;
          margin-top: 10upx;
          color: #666;
        }
      }
    }
  }

  .sub-title {
    color: #5F5F5F;
    font-size: 12px;
    text-align: center;
    margin-top: 12upx;
  }

  .row {
    margin-left: 100upx;
    font-size: 15px;
    line-height: 60upx;
    color: #000;
  }

  .footer {
    margin-top: 60upx;
  }
}
</style>
